<template>
  <div>
    <el-select v-model="Weekday" @change="getTime">
      <el-option
          v-for="item in tableData"
          :label="item"
          :value="item"
          :key="item"></el-option>
    </el-select>
      <el-button type="primary" @click="handleOpen">新增</el-button>
    <el-table
        ref="multipleTable"
        @selection-change="handleSelectionChange"
        :data="Time"
        style="width: 100%">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="time"
          label="日期"
          width="180">
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button
          >
          <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
        v-model="dialogVisible"
        title="新增时间段"
        width="30%"
        :before-close="handleClose"
    >
      <el-form :model="addTime" ref="addTime" :rules="addRule">
        <el-form-item prop="weakDay">
          工作日
          <el-select v-model="addTime.weakDay">
            <el-option
            v-for="item in tableData"
            :label="item"
            :key="item"
            :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="timeDay">
          时间段
          <el-input v-model="addTime.timeDay" placeholder="例如:8:00-9:00">

          </el-input>
        </el-form-item>
      </el-form>

      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit"
        >提交</el-button
        >
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {getTimeByWeekday,getWeekday,deleteByWeekdayAndTime,submitTime} from "../../api/time";
import {ElMessage} from "element-plus";
export default {
  name: "workingTimeMangement",
  data(){
    return{
      addTime: {weakDay:'',
      timeDay:''},
      dialogVisible: false,
      tableData:[],
      Weekday:'',
      Time: [],
      List: [],
      currentRow: null,
      addRule:{
        timeDay: [{required: true, message: '请输入时间', trigger: 'blur'}]
      }
    }
  },
  created() {
    this.getWeek()
  },
  methods: {
    getWeek(){
      getWeekday().then(res=>{
        if(res.code === 1){
          this.tableData = res.data
          console.log(this.tableData)
        }
      })
    },
    getTime(e){
      getTimeByWeekday(e).then(res=>{
        if(res.code === 1){
          console.log(res)
          this.Time = res.otherData.result
          console.log(this.Time)
        }
      })
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection)
    },
    handleDelete(index,row){
      console.log(this.Weekday)
      console.log(row.time)
      deleteByWeekdayAndTime(this.Weekday,row.time).then(res=>{
            if(res.code === 1){
              this.getTime(this.Weekday)
              ElMessage.success(res.message)
            } else {
              ElMessage.error(res.message)
            }
      })
    },
    handleEdit(index,row){
      console.log(row)
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    async handleSubmit(){
      this.dialogVisible = false
      await console.log(this.addTime)
      submitTime(this.addTime).then(res=>{
        if(res.code === 1){
          console.log(res)
          this.getTime(this.Weekday)
          ElMessage.success(res.message)
        } else {
          ElMessage.error(res.message);
        }
      })
      console.log('提交')
    },
    handleOpen(){
      this.dialogVisible = true
      this.addTime.weakDay = this.Weekday
      console.log(this.addTime.weakDay)
    }
  }
}
</script>

<style scoped>

</style>